<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link href="./index.css" rel="stylesheet" />
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>下一站荷兰后台管理系统</title>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- Loading mask -->
      <div :class="cx('loading', !loading && 'hidden')">
        <div class="loading-inner text-center">
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
              <span class="sr-only">45% Complete</span>
            </div>
          </div>
          <p>{{loadingMessage}}</p>
        </div>
      </div>
      <!-- 导航栏 -->
      <div class="container">
        <div class="row clearfix">
          <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">下一站荷兰后台</a>
              </div>

              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li :class="cx(tab === 'profile' && 'active')">
                    <a :href="'?tab=profile&env='+env">Profile管理</a>
                  </li>
                  <li :class="cx(tab === 'our-picks' && 'active')">
                    <a :href="'?tab=our-picks&env='+env">独家宝典</a>
                  </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#">退出登录</a></li>
                </ul>
              </div>

            </nav>
          </div>
        </div>
      </div> <!-- container of nav bar -->

      <!-- body -->
      <!-- body - profile编辑页 -->
      <div class="container" v-if="tab==='profile'">
        <div class="row clearfix">
          <div class="col-xs-12">
            <div class="alert alert-warning alert-dismissible" role="alert">
              <span>请尽量避免多人同时编辑！否则一部分修改可能会被其他人的修改覆盖。</b></span>
            </div>
          </div>
          <!-- 操作成功的消息框 -->
          <div class="col-xs-12">
            <div class="alert alert-warning alert-dismissible" role="alert" v-if="env==='devo'">
              <span>您正在测试环境中。所有数据的修改不会影响线上数据。<b>图片的修改会覆盖线上图片！建议新建测试用的Profile并在测试Profile上进行修改</b></span>
            </div>
          </div>
          <!-- 操作成功的消息框 -->
          <div class="col-xs-12">
            <div class="alert alert-success alert-dismissible" role="alert" v-if="message">
              <button type="button" class="close" aria-label="Close" @click="message=''">
                <span aria-hidden="true">&times;</span>
              </button>
              <span>{{message}}</span>
            </div>
          </div>
          <!-- 左边的列表/表单 -->
          <div class="col-xs-8 column">
            <!-- 列表 -->
            <div v-if="!editing">
              <div class="panel panel-default">
                <div class="panel-body">
                  <div class="btn btn-primary" @click="add" :disabled="disableCreateBtn">新建Profile</div>
                </div>
              </div>

              <ul class="pagination">
                <li><a href="javascript:;" @click="goPrevPage">Prev</a></li>
                <li><a>{{page}}/{{maxPage}}</a></li>
                <li><a href="javascript:;" @click="goNextPage">Next</a></li>
              </ul>

              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th style="width: 80px;">
                      <div class="can-sort" @click="sort('id')">
                        <span>ID</span>
                        <span v-if="sortField === 'id'">
                          <span class="glyphicon glyphicon-arrow-up" v-if="sortMethod === 'asc'"></span>
                          <span class="glyphicon glyphicon-arrow-down" v-else></span>
                        </span>
                      </div>
                      <div>
                        <input style="width: 5em;" class="form-control input-xs" v-model="filterId" placeholder="搜索..." />
                      </div>
                    </th>
                    <th class="can-sort">
                      <div @click="sort('title')">
                        <span>标题</span>
                        <span v-if="sortField === 'title'">
                          <span class="glyphicon glyphicon-arrow-up" v-if="sortMethod === 'asc'"></span>
                          <span class="glyphicon glyphicon-arrow-down" v-else></span>
                        </span>
                      </div>
                      <div>
                        <input class="form-control input-xs" v-model="filterTitle" placeholder="搜索..." />
                      </div>
                    </th>
                    <th style="width: 100px;">
                      <div>城市</div>
                      <select class="form-control input-xs" v-model="filterCity">
                        <option value="">全部</option>
                        <option v-for="city in cities" :value="city.id">{{city.name}}</option>
                      </select>
                    </th>
                    <th style="width: 100px;">
                      <div>类型</div>
                      <select class="form-control input-xs" v-model="filterCategory">
                        <option value="">全部</option>
                        <option v-for="(name, id) in categoryMap" :value="id">{{name}}</option>
                      </select>
                    </th>
                    <th>
                      <div>操作</div>
                      <div>&nbsp;</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr :class="cx('tr-pointer', item.id === selectedItemId && 'success')" v-for="item in itemlistForDisplay" @click="selectedItemId = item.id">
                    <td v-html="item.highlightedId"></td>
                    <td v-html="item.title"></td>
                    <td>{{item.cityName}}</td>
                    <td>{{categoryMap[item.category] || item.category}}</td>
                    <td>
                      <span><a href="javascript:;" @click="editing=true">编辑</a></span>
                      | <span><a href="javascript:;" @click.stop="remove(item.id)">删除</a></span>
                    </td>
                  </tr>
                </tbody>
              </table>
              <ul class="pagination">
                <li><a href="javascript:;" @click="goPrevPage">Prev</a></li>
                <li><a>{{page}}/{{maxPage}}</a></li>
                <li><a href="javascript:;" @click="goNextPage">Next</a></li>
              </ul>
            </div>
            <!-- 编辑页面 -->
            <div v-if="editing && selectedItem">
              <div class="form form-horizontal">
                <!-- 取消 | 保存 -->
                <div class="form-group">
                  <div class="col-xs-2"></div>
                  <div class="col-xs-10">
                    <a class="btn btn-default" href="javascript:;" @click.stop="cancelEdit">取消</a> 
                    <a class="btn btn-primary" href="javascript:;" @click.stop="save">保存</a>
                  </div>
                </div>

                <!-- ID -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="id">ID: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="id" v-model="selectedItem.id" disabled="true" />
                  </div>
                </div>
                <!-- 置顶 -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="top">置顶Profile: </label>
                  <div class="col-xs-10">
                    <div class="checkbox">
                      <label>
                        <input id="top" type="checkbox" v-model="selectedItem.top" />
                      </label>
                    </div>
                  </div>
                </div>
                <!-- coupon -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="top">Coupon: </label>
                  <div class="col-xs-10">
                    <div class="checkbox checkbox-inline" style="padding-left: 0;">
                      <label>
                        <input id="top" type="checkbox" v-model="selectedItem.coupon" />
                      </label>
                    </div>
                    <button v-if="selectedItem.coupon" class="btn btn-default" data-toggle="modal" data-target="#couponModal">编辑</button>
                  </div>
                </div>
                <!-- left icon -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="leftIcon">左边小图: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="leftIcon" type="file" @input="e => fileInput(e, 'leftIcon')" />
                  </div>
                </div>
                <!-- banner -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="banner">Banner: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="banner" type="file" @input="e => fileInput(e, 'banner')" />
                  </div>
                </div>
                <!-- inner1 -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="inner1">页内图1: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="inner1" type="file" @input="e => fileInput(e, 'inner1')" />
                  </div>
                </div>
                <!-- inner2 -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="inner2">页内图2: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="inner2" type="file" @input="e => fileInput(e, 'inner2')" />
                  </div>
                </div>
                <!-- Title -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="title">标题: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="title" v-model="selectedItem.title" placeholder="Title" />
                  </div>
                </div>
                <!-- En Title -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="en-title">英文标题: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="en-title" v-model="selectedItem.enTitle" placeholder="English Title" />
                  </div>
                </div>
                <!-- Label -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="label">标签: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="label" v-model="selectedItem.label" placeholder="标签。如有多个，请用英文逗号隔开" />
                    <div class="help-block">如有多个标签，请用英文逗号分隔</div>
                  </div>
                </div>
                <!-- Latitude -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="latitude">纬度: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="latitude" v-model.number="selectedItem.latitude"/>
                    <div class="help-block">Latitude</div>
                  </div>
                </div>
                <!-- Longitude -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="longitude">经度: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="longitude" v-model.number="selectedItem.longitude"/>
                    <div class="help-block">Longitude</div>
                  </div>
                </div>
                <!-- City -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="city">城市: </label>
                  <div class="col-xs-10">
                    <select class="form-control" id="city" v-model="selectedItem.city">
                      <option v-for="city in cities" :value="city.id">{{city.name}}</option>
                    </select>
                  </div>
                </div>
                <!-- Category -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="category">类别: </label>
                  <div class="col-xs-10">
                    <select class="form-control" id="category" v-model="selectedItem.category">
                      <option v-for="(category, id) in categoryMap" :value="id">{{category}}</option>
                    </select>
                  </div>
                </div>
                <!-- Summary -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="summary">景点介绍: </label>
                  <div class="col-xs-10">
                    <textarea class="form-control" id="summary" v-model="selectedItem.summary" rows="7"></textarea>
                  </div>
                </div>
                <!-- Recommendation -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="recommendation">特别推荐: </label>
                  <div class="col-xs-10">
                    <textarea class="form-control" id="recommendation" v-model="selectedItem.recommendation" rows="7"></textarea>
                  </div>
                </div>
                <!-- service -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="service">服务: </label>
                  <div class="col-xs-10">
                    <textarea class="form-control" id="service" v-model="selectedItem.service" rows="3"></textarea>
                    <div class="help-block">
                      <div>Profile中的几个小图标取决于该字段中的值：</div>
                      <div>Wi-Fi/Wifi，支付宝，微信支付，语音导览</div>
                    </div>
                  </div>
                </div>
                <!-- address -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="address">地址: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="address" v-model="selectedItem.address" />
                  </div>
                </div>
                <!-- openHour -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="openHour">开放时间: </label>
                  <div class="col-xs-10">
                    <textarea class="form-control" id="openHour" v-model="selectedItem.openHour" rows="3"></textarea>
                  </div>
                </div>
                <!-- price -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="price">价格: </label>
                  <div class="col-xs-10">
                    <textarea class="form-control" id="price" v-model="selectedItem.price" rows="3"></textarea>
                  </div>
                </div>
                <!-- website -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="website">官方网址: </label>
                  <div class="col-xs-10"><input class="form-control" id="website" v-model="selectedItem.website" /></div>
                </div>
                <!-- telephone -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="telephone">电话: </label>
                  <div class="col-xs-10"><input class="form-control" id="telephone" v-model="selectedItem.telephone" /></div>
                </div>
                <!-- 取消 | 保存 -->
                <div class="form-group">
                  <div class="col-xs-2"></div>
                  <div class="col-xs-10">
                    <a class="btn btn-default" href="javascript:;" @click.stop="cancelEdit">取消</a> 
                    <a class="btn btn-primary" href="javascript:;" @click.stop="save">保存</a>
                  </div>
                </div>
                <!-- 中间灰色的部分 -->
              </div>
              <pre>{{selectedItem}}</pre>
            </div>
          </div>
          <!-- 右边的profile -->
          <div class="col-xs-4 column">
            <div class="profile list" v-if="selectedItem">
              <div class="profile-wrapper flex nowrap">
                <div class="grow0 shrink0"><img class="left-icon" :src="selectedItem.leftIcon"/></div>
                <div class="grow1 flex vertical space-between">
                  <div>{{selectedItem.title}}</div>
                  <div>
                    <span class="profile-label" v-for="label in selectedItem.label.split(',')">{{label}}</span>
                  </div>
                  <div class="flex nowrap">
                    <div v-for="iconInfo in iconInfoList" 
                      :class="cx('text-center', 'item-icon', !selectedItem[iconInfo.field] && 'no-icon')">
                      <div><img :src="iconInfo.icon"></div>
                      <div>{{iconInfo.text}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="profile" v-if="selectedItem">
              <div class="top-bar text-center">下一站荷兰</div>
              <div><img class="banner-img" :src="selectedItem.banner"/></div>
              <div class="title text-center bold">{{selectedItem.title}}</div>
              <div class="title text-center" v-if="selectedItem.enTitle">{{selectedItem.enTitle}}</div>
              <div class="padding-1em">
                <div class="section">
                  <div class="subtitle bold">景点介绍</div>
                  <div class="detail padding-top-10">{{selectedItem.summary}}</div>
                </div>
                <div class="padding-1em"></div>
                <div class="section recommend">
                  <div class="subtitle bold">特别推荐</div>
                  <div class="detail padding-top-10">
                    <div class="recommend-left"><img src="./images/recommend-left.png"></div>
                    <div class="quote-1"><img src="./images/icon-quote.png"></div>
                    <div class="quote-2"><img src="./images/icon-quote.png"></div>
                    <div>{{selectedItem.recommendation}}</div>
                  </div>
                </div>
              </div>
              <div class="padding-1em"></div>
              <div class="gray-bg text-center">
                <div class="subtitle bold">服务</div>
                <div class="detail" v-html="br(selectedItem.service)"></div>
                <div class="subtitle bold">地址</div>
                <div class="detail" v-html="br(selectedItem.address)"></div>
                <div class="subtitle bold">开放时间</div>
                <div class="detail" v-html="br(selectedItem.openHour)"></div>
                <div class="subtitle bold">门店价格</div>
                <div class="detail" v-html="br(selectedItem.price)"></div>
                <div v-if="selectedItem.website">
                  <div class="subtitle bold">官方网址</div>
                  <div class="detail" v-html="selectedItem.website"></div>
                </div>
                <div v-if="selectedItem.telephone">
                  <div class="subtitle bold">电话</div>
                  <div class="detail" v-html="selectedItem.telephone"></div>
                </div>
              </div>
              <div class="padding-top-10"><img class="inner-img" :src="selectedItem.inner1"/></div>
              <div class="padding-top-15"><img class="inner-img" :src="selectedItem.inner2"/></div>
            </div>
          </div>
        </div>
      </div><!-- body - Profile -->

      <!-- body - 独家宝典 -->
      <div class="container" v-if="tab==='our-picks'">
        <div class="row clearfix">
          <div class="col-xs-12">
            <div class="alert alert-warning alert-dismissible" role="alert">
              <span>请尽量避免多人同时编辑同一个城市的数据！否则一部分修改可能会被其他人的修改覆盖。</b></span>
            </div>
          </div>
          <!-- 操作成功的消息框 -->
          <div class="col-xs-12">
            <div class="alert alert-warning alert-dismissible" role="alert" v-if="env==='devo'">
              <span>您正在测试环境中。所有数据的修改不会影响线上数据。<b>图片的修改会覆盖线上图片！建议新建测试用的Profile并在测试Profile上进行修改</b></span>
            </div>
          </div>
          <!-- 操作成功的消息框 -->
          <div class="col-xs-12">
            <div class="alert alert-success alert-dismissible" role="alert" v-if="message">
              <button type="button" class="close" aria-label="Close" @click="message=''">
                <span aria-hidden="true">&times;</span>
              </button>
              <span>{{message}}</span>
            </div>
          </div>
          <!-- 富文本使用说明 -->
          <div v-if="editing && selectedArticle">
            <div class="col-xs-12 P">
              <div class="btn btn-default" @click="cancelEditArticle">返回</div>
              <div class="btn btn-primary" @click="saveArticle">保存</div>
            </div>
            <div class="col-xs-7">
              <h3>富文本语法说明</h3>
              <h4>特殊文本</h4>
              <div>用<code>{xxx:文字}</code>来表示特殊样式的文字。其中xxx可以是以下字母的组合：</div>
              <div>t - <span class="t">蓝色文字</span>。是tint的缩写。</div>
              <div>b - <span class="b">加粗文字</span>。是bold的缩写。</div>
              <div>c - <span class="">居中文字</span>。是center的缩写。</div>
              <div>p - <span class="">上下带有5px padding的文字</span>。是padding的缩写。</div>
              <div>P - <span class="">上下带有10px padding的文字</span>。是Padding的缩写。</div>
              <div>l - <span class="l">大号文字</span>。是large的缩写。</div>
              <div>T - <span class="t b l">标题</span>。Title的缩写，相当于<code>{tbcl:标题}</code></div>
              
              <h4>图片</h4>
              <div>用<code>{img:x}</code>表示引用图片。其中x是素材的编号，从1计数。可以从素材管理的图片上方复制图片的代码并粘贴到文中。</div>
              <br/>
            </div>
            <div class="col-xs-5"></div>
          </div>
          <!-- 左边的列表/表单 -->
          <div class="col-xs-7">
            <!-- 表单 -->
            <div v-if="editing && selectedArticle">
              <div class="form">
                <div class="form-group">
                  <textarea class="form-control" v-model="selectedArticle.title" rows="2" placeholder="请输入标题" ></textarea>
                </div>
                <div class="form-group">
                  <textarea class="form-control article-source" rows="30" @input="updateTextAreaHeight" @focus="updateTextAreaHeight" v-model="selectedArticle.content"></textarea>
                </div>
<!--                 <div class="form-group">
                  <h4>素材管理</h4>
                  <label>
                    <div class="btn btn-default">添加素材</div>
                    <input type="file" class="hidden" multiple="multiple" @input="addArticleImages">
                  </label>
                </div>
                <div class="flex">
                  <div class="article-image-preview" v-for="(image, i) in selectedArticle.images">
                    <div>
                      Code: <input :value="'{img:'+i+'}'" onfocus="this.select()" onmouseover="this.focus()" />
                    </div>
                    <label>
                      <img :src="image.url"/>
                      <input type="file" class="hidden" :data-index="i" @input="editArticleImage">
                      <div>
                        <div class="btn btn-default btn-xs">编辑</div>
                      </div>
                    </label>
                  </div>
                </div> -->
              </div>
              <div class="P">
                <div class="btn btn-default" @click="cancelEditArticle">返回</div>
                <div class="btn btn-primary" @click="saveArticle">保存</div>
              </div>
            </div>
            <!-- 列表 -->
            <div v-if="!editing">
              <div class="P">
                <a v-for="c in cities" :href="'?tab=our-picks&env='+env+'&city='+c.id"
                  :class="cx('btn', city===c.id ? 'btn-success' : 'btn-default')">{{c.name}}</a>
              </div>
              <div class="form P">
                <div class="btn btn-primary" @click="addArticle">添加</div>
              </div>
              <table class="table table-bordered">
                <tr>
                  <!-- <th>顺序</th> -->
                  <th>标题</th>
                  <th>素材数量</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(article, index) in articleList"
                  :class="cx('tr-pointer', selectedArticle && selectedArticle.index===index && 'success')"
                  @click="selectArticle(article)">
                  <!-- <td>
                    <div class="btn btn-default btn-xs" @click.stop="moveUp(article)">上移</div>
                    <br/>
                    <div class="btn btn-default btn-xs" @click.stop="moveDown(article)">下移</div>
                    <br/>
                    <div>注意：图片顺序不会变</div>
                  </td> -->
                  <td>
                    <div>{{article.title}}</div>
                    <div class="article-listitem-img"><img :src="'http://oss.matrixsci.cn/ned/our-picks/'+city+'/'+(index+1)+'.jpg'"/></div>
                  </td>
                  <td>{{article.imageCount}}</td>
                  <td>
                    <div class="btn btn-default btn-xs" @click="editArticle(article)">编辑</div>
                    <br/>
                    <div class="btn btn-default btn-xs">删除</div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <!-- 右边的文章 -->
          <div class="col-xs-5">
            <div class="app-width app-padding border" style="min-height: 668px;" v-if="selectedArticle">
              <div class="article-title" v-html="selectedArticleTitleHtml"></div>
              <div class="article-content" v-html="selectedArticleContentHtml"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- body - 独家宝典 -->

      <!-- coupon编辑弹出框 -->
      <div class="modal fade" id="couponModal" tabindex="-1" role="dialog" aria-labelledby="couponModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
              <h4 class="modal-title" id="myModalLabel">编辑Coupon</h4>
            </div>
            <div class="modal-body">
              <div class="form form-horizontal" v-if="editing && selectedItem">
                <!-- 在Profile中弹出的图 -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="coupon-popup">Profile<br/>内弹出图: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="coupon-popup" type="file" @input="e => fileInput(e, 'couponPopup')" />
                  </div>
                  <div v-if="selectedItem.coupon">
                    <div class="col-xs-2"></div>
                    <div class="col-xs-10">
                      <div class="border" style="width: 300px; height:413px">
                        <img class="full" :src="selectedItem.couponPopup">
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 在Profile中弹出的图 -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="coupon-listitem">List中的<br/>横条图: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="coupon-listitem" type="file" @input="e => fileInput(e, 'couponListItem')" />
                  </div>
                  <div v-if="selectedItem.coupon">
                    <div class="col-xs-2"></div>
                    <div class="col-xs-10">
                      <div class="app-width border" style="height:144px">
                        <img class="full" :src="selectedItem.couponListItem">
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 详情图 -->
                <div class="form-group">
                  <label class="col-xs-2 control-label" for="coupon-detail">Coupon<br/>详情图: </label>
                  <div class="col-xs-10">
                    <input class="form-control" id="coupon-detail" type="file" @input="e => fileInput(e, 'couponDetail')" />
                  </div>
                  <div v-if="selectedItem.coupon">
                    <div class="col-xs-2"></div>
                    <div class="col-xs-10">
                      <div class="app-width border" style="height:667px">
                        <img class="full" :src="selectedItem.couponDetail">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
              <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
          </div>
        </div>
      </div>

    </div> <!-- app -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
